<template>
  <span class="node-type" @click.stop>
    <span class="type-label" @click="$emit('click')" :style="typeStyle">
      {{ type }}
      <el-icon><Setting /></el-icon>
    </span>
  </span>
</template>

<script setup>
import { computed } from 'vue'
import { Setting } from '@element-plus/icons-vue'
import { getTypeStyle } from '../config/typeConfig'

const props = defineProps({
  type: {
    type: String,
    required: true
  }
})

const emit = defineEmits(['click'])

const typeStyle = computed(() => getTypeStyle(props.type))
</script>

<style scoped>
.node-type {
  display: flex;
  align-items: center;
  margin-right: 16px;
}

.type-label {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.type-label:hover {
  opacity: 0.8;
}
</style> 